<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>日期天气</title>
    <link rel="stylesheet" href="./lib/styles.css" />

    <script type="text/javascript" src="./lib/aircity/ac_conf.js"></script>
    <script type="text/javascript" src="./lib/aircity/ac.min.js"></script>
    <script type="text/javascript" src="./lib/Vue3.js"></script>
    <script type="text/javascript" src="./lib/ElementPlus/index.js"></script>
    <link rel="stylesheet" href="./lib/ElementPlus/index.css" />
  </head>
  <body>
    <div id="dom">
      <div id="player"></div>
      <div class="btn-list">
        <div onclick="SetWeather()" class="btn">日期天气</div>
      </div>
      <div class="weather" v-if="showWeather">
        <el-divider content-position="left" border-style="dashed">时间</el-divider>
        <div class="TimeType">
          <div class="type" @click="TimeTypeClick(item)" v-for="item in TimeType" :key="item.name">
            <img :src="item.icon" alt="" />
            {{ item.name }}
          </div>
        </div>
        <el-divider content-position="left" border-style="dashed">天气</el-divider>
        <div class="weathertype">
          <div @click="WeatherClick(item)" class="type" v-for="item in WeatherType" :key="item.name">
            <img :src="item.icon" alt="" />
            {{ item.name }}
          </div>
        </div>
        <div class="open-dark">
          <div class="dark-item">
            <span>黑暗模式:</span>
            <el-switch v-model="isDark" @change="changeDarkMode" class="ml-2" style="--el-switch-on-color: #0c0c0c; --el-switch-off-color: #ccc" />
          </div>
        </div>
      </div>
    </div>
    <script type="text/javascript">
      const { createApp, computed, ref } = Vue
      let showWeather = ref(false)
      const isDark = ref(false)

      const SetWeather = () => {
        showWeather.value = !showWeather.value
      }

      //天气的点击事件
      const WeatherClick = async val => {
        weatherInit()
        switch (val.name) {
          case '晴天':
            fdapi.weather.setCloudDensity(0)
            fdapi.weather.setCloudHeight(0)
            fdapi.weather.setCloudThickness(0.1)
            break
          case '多云':
            fdapi.weather.setSunIntensity(3)
            fdapi.weather.setCloudDensity(10)
            fdapi.weather.setCloudHeight(10)
            fdapi.weather.setCloudThickness(2)
            break

          case '雨':
            fdapi.weather.setCloudDensity(1)
            fdapi.weather.setCloudHeight(5)
            fdapi.weather.setCloudThickness(0.5)

            //设置完云层厚度后才能开启雨效
            fdapi.weather.setRainParam(0.5, 0.5, 0.6, [0.5, 0.5, 0.5, 0.1], 0.5, 0.2)
            break

          case '雪':
            fdapi.weather.setCloudDensity(1)
            fdapi.weather.setCloudHeight(15)
            fdapi.weather.setCloudThickness(0.5)
            //设置完云层厚度后才能开启雪效
            fdapi.weather.setSnowParam(0.3, 0.1, 0.1, [1, 1, 1, 1], 0.1, 0.2)
            break

          case '雾':
            //设置云层厚度
            fdapi.weather.setCloudDensity(0.65)
            //设置雾的参数
            fdapi.weather.setFogParam(0.01, [0.7, 0.7, 0.7, 1], 0, 0, 0.3)
            //设置日照强度
            fdapi.weather.setSunIntensity(2)

            break
          default:
            break
        }
      }

      //时间的点击事件
      const TimeTypeClick = val => {
        switch (val.name) {
          case '早晨':
            fdapi.weather.setDateTime(2024, 8, 30, 8, 20, false)

            break
          case '中午':
            fdapi.weather.setDateTime(2024, 8, 30, 12, 20, false)

            break
          case '傍晚':
            fdapi.weather.setDateTime(2024, 8, 30, 17, 20, false)

            break
          case '夜晚':
            fdapi.weather.setDateTime(2024, 8, 30, 20, 20, false)

            break
          default:
            break
        }
      }

      //天气类型
      const WeatherType = ref([
        {
          name: '晴天',
          icon: 'images/晴天.png'
        },
        {
          name: '多云',
          icon: 'images/阴天.png'
        },
        {
          name: '雨',
          icon: 'images/大雨.png'
        },
        {
          name: '雪',
          icon: 'images/大雪.png'
        },
        {
          name: '雾',
          icon: 'images/雾.png'
        }
      ])

      //时间的类型
      const TimeType = ref([
        {
          name: '早晨',
          icon: 'images/早晨.png'
        },
        {
          name: '中午',
          icon: 'images/中午.png'
        },
        {
          name: '傍晚',
          icon: 'images/傍晚.png'
        },
        {
          name: '夜晚',
          icon: 'images/夜晚.png'
        }
      ])

      //初始化天气
      const weatherInit = () => {
        // 禁用雨雪效果;
        fdapi.weather.disableRainSnow()
        //设置为白天
        fdapi.weather.setDateTime(2024, 8, 30, 7, 20, false)
        //设置雾
        fdapi.weather.setFogParam(0.3327, [0.551009, 0.656468, 0.706422, 0.04], 0.3966, 28320.001953, 0.04)
        fdapi.weather.setCloudDensity(0)
        fdapi.weather.setCloudHeight(0)
        fdapi.weather.setCloudThickness(0.1)
        //重置日照
        fdapi.weather.setSunIntensity(10.03)
        //重置环境光
        fdapi.weather.setAmbientLightIntensity(1)
      }

      const changeDarkMode = val => {
        fdapi.weather.setDarkMode(val)
      }

      /**
       * 初始化场景
       */
      const OnLoad = () => {
        const __DigitalTwinPlayer = new DigitalTwinPlayer(HostConfig.Player, {
          domId: 'player',
          apiOptions: {
            onReady: function () {
              fdapi.reset()
            }
          }
        })
      }

      /**
       * 自适应分辨率
       */
      const onResize = async () => {
        let playerView = document.getElementById('player')
        playerView.style.height = window.innerHeight + 'px'
        playerView.style.width = window.innerWidth + 'px'
      }

      const app = createApp({
        setup() {
          // 页面加载调用
          window.addEventListener('load', OnLoad, true)

          // 页面窗口变换调用
          window.addEventListener('resize', onResize, true)
          return {
            showWeather,
            WeatherType,
            TimeType,
            WeatherClick,
            isDark,
            weatherInit,
            TimeTypeClick,
            changeDarkMode
          }
        }
      })
      app.use(ElementPlus).mount('#dom')

      /**
       * 页面离开事件(离开时清除此页面的操作及重置场景)
       */
      window.onunload = function (e) {
        // 重置场景
        fdapi.reset()
      }
    </script>
  </body>
</html>
